<template>
  <div class="box">
     <div class="main-box">
        <div class="main"  ref="pir"></div>
     </div>
     <div class="title">
       {{item.name}}
     </div>
  </div>
</template>

<script>
  let echarts = require('echarts')
  export default{
    name:"ck_nutrittion_pir",
    props:{
      color:{
        type:Array,
        default:['#868dff', '#f1f1f1']
      },
      item:{
        type:Object,
        default:{name:'',value:0}
      }
    },
    watch:{
      item(){
        this.$nextTick(()=>{
          this.initEchart()
        })
      }
    },
    methods:{
      initEchart(){
        let  data = this.item
        let colors = this.color
        let seriesArr= {
          name: data.name,
          type: 'pie',
          clockWise: false,
          radius: ["50%", "80%"],
          itemStyle:  {
              normal: {
                  color: colors[0],
                  shadowColor: colors[0],
                  shadowBlur: 0,
                  label: {
                      show: false
                  },
                  labelLine: {
                      show: false
                  },
              }
            },
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [{
              value: data.value,
              label: {
                  normal: {
                      formatter: function(params){
                          return params.value+'%';
                      },
                      position: 'center',
                      show: true,
                      textStyle: {
                          fontSize: '12',
                          fontWeight: 'bold',
                          color: "#808080"
                      }
                  }
              },
            }, {
                value: 100-data.value,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: colors[1]
                    },
                    emphasis: {
                        color: colors[1]
                    }
                }
            }]
            }
             let  option = {
                  backgroundColor: "#fff",
                  series: seriesArr
              }
            let dom = this.$refs.pir
            let  myChart   = echarts.init(dom);
            myChart.setOption(option)
      }
    }
  }
</script>

<style lang="stylus" scoped="scoped">
  .box{
    width:100%;
       .main-box{
         width:100%;
         .main{
           width:100%;
           height:80px;
          }
       }
       .title{
         color:#808080;
         font-size:12px;
         text-align:center;
       }
  }
</style>
